{extend name="wap/default_new/base" /}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/components.css">
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/group_goods_list.css">
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/category.css">
<style>
.sliding{overflow-y: auto;background: #ffffff;}
.sliding::-webkit-scrollbar {display: none;}
.sliding ul {white-space: nowrap;height:51px;line-height: 50px;text-align: left;}
.sliding ul li {white-space: pre-line;padding:0 10px 0 10px;display: inline-block;background:#ffffff;border-right:2px solid #f8f8f8;}
.sliding ul li:LAST-CHILD{border:0;}
.selected{color:red;}
.brand{width: 100%;height: 280px;overflow: hidden;position: relative;margin-top: 10px;}
.brand_img{display: inline-block;vertical-align: middle;width: 100%;height: auto;}
.goods-list-grid{margin-top: 5px;}
.openList li{list-style: none;}
.article_class {overflow-x: scroll; height: 32px; white-space: nowrap; margin-top: 5px; border-bottom: 1px solid #ddd;}
.article_class::-webkit-scrollbar {display: none;}
</style>
{/block}
{block name="goodsHead"}
<section class="head">
	<a class="head_back" href="javascript:window.history.go(-1)"><i class="icon-back"></i></a>
	<div class="head-title"><span style="margin-left: 40px;">{:lang('label_area')}</span>{include file="wap/default_new/controGroup" /}</div>
</section>
<div style="height: 45px;"></div>
{if condition="$brand_adv['is_use'] eq 1"}
    {if condition="$brand_adv['adv_list'][0]['adv_image'] neq ''"}
<div class="slick">
	<a href="{:__URL($brand_adv['adv_list'][0]['adv_url'])}">
		<img src="{:__IMG($brand_adv['adv_list'][0]['adv_image'])}" style="width:100%;">
	</a>
</div>
   {/if}
{/if}

{/block}

{block name="main"}
<div class="sliding" {if condition="$brand_adv['is_use'] eq 0"}style="margin-top:45px;"{/if}>
	<ul id="slider" class="article_class">
		<li class = "defaualt selected" onclick="showCategorySecond('',this,1)">{:lang('whole')}</li>
		{foreach name="groupList" item = "group_list" key = "k"}
		<li onclick="showCategorySecond({$group_list.group_id},this,1)">{$group_list.group_name}</li>
		{/foreach}
	</ul>
</div>
<div class="goods-list-grid openList">
	<div class="blank-div"></div>
	<div id="goods_list">
		<div class="tablelist-append clearfix" style="overflow: hidden;"></div>
	</div>
</div>
<input type="hidden" id="page_count"><!-- 总页数 -->
<input type="hidden" id="page" value="1"><!-- 当前页数 -->
<input type="hidden" id="group_id" >

<script src="__TEMP__/{$style}/public/js/public_assembly.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('.defaualt').eq(0).click();
})

var is_load = false;
var offset_left = 0;
function showCategorySecond(group_id,obj,page){
	if(obj!=null){
		//计算最大偏移量 10是边距
		var max_offset_left = $(".article_class li:last-child").offset().left + $(".article_class li:last-child").innerWidth() - $(".article_class").innerWidth() - 10;
		//设置选中效果
		if(!$(obj).hasClass("selected")){
				
				var _index = $(obj).index(); 
				var _active_index = $("#slider li.selected").index();
				var center_width = $("#slider").innerWidth() / 2;
				var _offset_left = $(obj).offset().left;
			
				var _oneself_width = $(obj).innerWidth() / 2;
				if(_index > _active_index){
					//向左偏移
					offset_left += (_offset_left - center_width + _oneself_width);
				}else{
					//向右偏移
					offset_left -= (center_width - _offset_left - _oneself_width);
				}
				offset_left = offset_left < 0 ? 0 : offset_left; // 最小偏移量
				offset_left = offset_left > max_offset_left ? max_offset_left : offset_left; //最大偏移量
				
				$("#slider").animate({"scrollLeft":offset_left},500) //设置偏移量; */
				$("#slider li").removeClass("selected");
				$(obj).addClass("selected");
		}
	}
	
	
	$("#page").val(page);//当前页
	$('#group_id').val(group_id);
	if(is_load){
		return false;
	}
	is_load = true;
	$.ajax({
		url:'{:__URL('APP_MAIN/Goods/promotionZone')}',
		data:{ 'group_id' : group_id, "page":page},
		success:function(data){
			$("#page_count").val(data['page_count']);//总页数
			is_load = false;
			if(data['data'].length==0){
				$('.tablelist-append').html('<p style="color:#939393;text-align:center;margin-top:100px;"><img src="__TEMP__/{$style}/public/images/wap_nodata.png" height="60" style="margin-bottom:20px;"><br>Sorry！{:lang("goods_no_goods_you_want")}…</p>');
			}else{
				if(page == 1){
					var html = '';
				}else if(page > 1){
					var html = $('.tablelist-append').html();
				}
				for(var i=0;i<data['data'].length;i++){
					var item = data['data'][i];
					html+='<div class="product single_item info">'
						+'<li>'
							+'<div class="item">'
								+'<div class="item-tag-box">'
									+'<!--{:lang("hot_sale")}icon{:lang("position_is")}：0px 0px，{:lang("goods_new")}icon{:lang("position_is")}：0px -35px，{:lang("competitive_products")}icon{:lang("position_is")}：0px -70px-->'
								+'</div>'

								+'<div class="item-pic">'
									+'<a href="'+__URL('APP_MAIN/goods/goodsdetail?id='+item.goods_id)+'">'
										+'<img src="{:__IMG($default_goods_img)}" class="lazy_load" data-original="'+__IMG(item.pic_cover_small)+'" alt="'+item.goods_name+'" style="display: block;max-width:100%;max-height:100%;">'
									+'</a>'
								+'</div>'

								+'<dl>'
									+'<dt>'
										+'<a href="'+__URL('APP_MAIN/goods/goodsdetail?id='+item.goods_id)+'">';
										if(item.group_name != null){
											html += '<i class="goods_tab">'+item.group_name+'</i>';
										}
										html += item.goods_name
										+'</a>'
									+'</dt>'
									+'<dd style="height:30px;overflow:hidden;">'
										+'<i>'+item.display_price+'</i>';
										if(item.shipping_fee == 0){
											html += '<i class="shipping_fee" style="margin-top:7px;">包邮</i>';
										}
									html += '</dd>'
								+'</dl>'
							+'</div>'
						+'</li>'
					+'</div>';
				}
				$('.tablelist-append').html(html);
				img_lazyload();	
			}
		}
	});
}

//滑动到底部加载
$(window).scroll(function(){
	var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
	var content_box_height = parseFloat($(".tablelist-append").height());
	if(totalheight - content_box_height >= 100){
		if(!is_load){
			var page = parseInt($("#page").val()) + 1;//页数
			var total_page_count = $("#page_count").val(); // 总页数
			var group_id = $("#group_id").val();
			if(page > total_page_count){
				return false;
			}else{
				showCategorySecond(group_id,null,page);
			}
		}
	}
})
</script>
{/block}
{block name="bottom"}{/block}